<template>
  <view class="container" :style="{height: `${windowHeight}px`}">
	  <view style="padding-top: 10px;">
		<uni-segmented-control :current="current" :values="items" styleType="button" activeColor="#2979ff" @clickItem="onClickItem" />
		<view class="content" v-if="current == 0">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="100px" >
						<u-form-item label="供应商" prop="form.vendorName" ref="item1" @click="vendorShow = true;hideKeyboard()">
							<u--input v-model="form.vendorName" disabled disabledColor="#ffffff"></u--input>
						</u-form-item>
						<u-form-item label="型号" prop="form.name" ref="item1">
							<u--input v-model="form.name"></u--input>
						</u-form-item>
						<u-form-item label="入库数量" prop="form.name" ref="item1">
							<u--input v-model="form.name"></u--input>
						</u-form-item>
						<u-form-item label="来料米数" prop="form.name" ref="item1">
							<u--input v-model="form.name"></u--input>
						</u-form-item>
						<u-form-item label="缸号" prop="form.name" ref="item1">
							<u--input v-model="form.name"></u--input>
						</u-form-item>
						<u-form-item label="可用门幅" prop="form.name" ref="item1" @click="fabricWidthShow = true;hideKeyboard()">
							<u--input v-model="form.name" disabled disabledColor="#ffffff"></u--input>
						</u-form-item>
						<u-form-item label="仓库" prop="form.name" ref="item1" @click="warehouseShow = true;hideKeyboard()">
							<u--input v-model="form.name" disabled disabledColor="#ffffff"></u--input>
						</u-form-item>
						<u-form-item label="库位" prop="form.name" ref="item1">
							<u--input v-model="form.name" disabled disabledColor="#ffffff"></u--input>
						</u-form-item>
						<u-form-item label="品质" prop="form.name" ref="item1">
							<u--input v-model="form.name"></u--input>
						</u-form-item>
						<u-form-item label="备注" prop="form.name">
							<u--input v-model="form.name"></u--input>
						</u-form-item>
						<u-form-item label="来货日期" prop="form.name" ref="item1" @click="dateShow = true;hideKeyboard()">
							<u--input v-model="form.date" disabled disabledColor="#ffffff"></u--input>
						</u-form-item>
						<view style="padding-top: 20px;">
							<u-button type="primary" text="确定入库"></u-button>
						</view>
					</u--form>
					<u-action-sheet
						:show="vendorShow"
						:actions="vendorActions"
						@close="vendorShow = false"
						@select="vendorSelect"
					>
					</u-action-sheet>
					<u-action-sheet
						:show="fabricWidthShow"
						:actions="actions"
						@close="fabricWidthShow = false"
						@select="fabricWidthSelect"
					>
					</u-action-sheet>
					<u-action-sheet
						:show="warehouseShow"
						:actions="warehouseActions"
						@close="warehouseShow = false"
						@select="warehouseSelect"
					>
					</u-action-sheet>
					<u-datetime-picker
						:show="dateShow"
						v-model="date"
						mode="date"
						@cancel="dateShow = false"
						@confirm="confirmDate"
					></u-datetime-picker>
		</view>
		<view class="content" v-if="current == 1">
			<uni-table ref="table" width="100%" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="70" align="center">产品型号</uni-th>
					<uni-th width="70" align="center">入库数量</uni-th>
					<uni-th width="70" align="center">仓库</uni-th>
					<uni-th width="70" align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td>{{ item.date }}</uni-td>
					<uni-td>
						<view class="name">{{ item.name }}</view>
					</uni-td>
					<uni-td align="center">{{ item.address }}</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
		</view>
	</view>
  </view>
</template>

<script>
	import { vendorList } from '@/api/fabricManagement/InventoryQuery.js'
  export default {
    data() {
      return {
		  loading: false,
        windowHeight: uni.getSystemInfoSync().windowHeight,
		current: 0,
		items: [ '入库操作', '入库记录'],
		tableData: [],
		// 每页数据量
		pageSize: 10,
		// 当前页
		pageCurrent: 1,
		// 数据总量
		total: 0,
		form: {
			date: null
		},
		rules:{},
		vendorShow: false,
		vendorActions: [],
		vendorList: [],
		fabricWidthShow: false,
		actions: [
			{name: '51公分'},
			{name: '55公分'},
			{name: '61公分'},
			{name: '66公分'},
 		],
		warehouseShow: false,
		warehouseActions: [
			{name: '2.8米仓库'},
			{name: '成品仓'},
		],
		dateShow: false,
		date: null
      }
    },
	onLoad() {
		this.getVendorList()
		this.form.date = new Date().toISOString().split('T')[0]
		this.date = new Date().toISOString().split('T')[0]
	},
    methods: {
		async getVendorList() {
			const params = {
				pageNum: 1,
				pageSize: 500
			}
			const res = await vendorList(params)
			this.vendorList = res.rows
			this.vendorActions = res.rows.map((_)=>{
				return { name: _.vendorName}
			})
		},
		vendorSelect(e) {
			this.form.vendorName = e.name
			this.form.vendorId = this.vendorList.find(_=> _.vendorName === e.name).vendorId
		},
        input() {
		  this.$modal.showToast(this.model)
	    },
	    clearModel() {
		  this.model = ''
	    }, 
	    onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex
			}
			this.$modal.showToast( e.currentIndex)
		},
		fabricWidthSelect(e) {
			console.log(e)
		},
		warehouseSelect(e) {
			console.log(e)
		},
		confirmDate(e) {
			const timeFormat = uni.$u.timeFormat
			let newDate1 = timeFormat(e.value, 'yyyy-mm-dd')
			console.log(newDate1)
			this.form.date = newDate1
			this.dateShow = false
		},
		change(e) {
			// this.getData(e.current)
		},
		getData(pageCurrent, value = '') {
			this.loading = true
			this.pageCurrent = pageCurrent
			this.request({
				pageSize: this.pageSize,
				pageCurrent: pageCurrent,
				value: value,
				success: res => {
					// console.log('data', res);
					this.tableData = res.data
					this.total = res.total
					this.loading = false
				}
			})
		},
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #fff;
	padding: 5px;
  }
::v-deep {
  .u-form {
    .u-form-item {
      .u-form-item__body {
        padding: 5px 0 0 0;
      }
    }
  }
  .u-action-sheet__item-wrap {
  		overflow: auto;
  		max-height: 50vh;
  	}
}
  
</style>
